<!--ZmCheck 多选按钮样式 -->
<template>
  <u-checkbox-group v-model="checkedList">
    <u-checkbox
      :checked="check"
      :shape="shape"
      active-color="#45C8F3"
      @change="handleClick"
    >
    </u-checkbox>
  </u-checkbox-group>
</template>

<script>
  export default {
    name: 'yy-check',
    props: {
      value: {
        type: [Array, String],
        default: ''
      },
      check: {
        type: Boolean,
        default: false
      },
      shape: {
        type: String,
        default: 'square'
      }
    },
    computed: {
      checked: {
        get() {
          let res = this.value
          if (typeof this.value === 'string') {
            res = this.value.split(',')
          }
          return res
        },
        set(val) {
          this.$emit('input', val.join(','))
        }
      }
    },
    data() {
      return {
        checkedList: []
      }
    },
    methods: {
      handleClick() {
        this.$emit('change')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .ZmCheck {
    font-size: 0.38rem;
    &.check-icon {
      color: $mainColor;
    }
    &.no-check__icon {
      color: #d6dce2;
    }
  }
</style>
